<!DOCTYPE html>
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    var ws;

    function hello(){
        var wid="ws://localhost:8848/chat/"+document.getElementById("wid").value;
        ws = new WebSocket(wid);
        ws.onopen = function(evn){
            console.log(evn);
        };
        ws.onmessage = function(evn){
            console.log(evn.data);
            var dv = document.getElementById("dv");
            dv.innerHTML+=evn.data;
        };
        ws.onclose = function(){
            console.log("关闭");
        };

    };
    function subsend(){
        var msg = document.getElementById("msg").value;
        ws.send(msg);
        document.getElementById("msg").value = "";
    }
    function subsend2() {
        let file = document.getElementById("file").files[0];
        if(!file)
        {
            return;
        }
        ws.send(file.name+":fileStart");
        let reader=new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload=function loaded(evn) {
           let blob = evn.target.result;
           ws.send(blob);
        }
    }
</script>
<body>
<h2>Hello World!</h2>
<div id="dv"/>
<input type="file" id="file">
<input th:value="${id}" id="wid" type="hidden">
<input type="button" value="连接" onclick="hello()" />
<input type="text" id ="msg" />
<input type="button" onclick="subsend()" value="发送" />
<input type="button" onclick="subsend2()" value="发送文件" />
</body>
<script>

</script>
</html>